<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-gray-50">
    <main class="max-w-8xl mx-auto px-4 py-8 space-y-8">
      <!-- 个人信息卡片 -->
      <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="p-6 flex">
          <div class="w-32 h-32 rounded-full overflow-hidden mr-6">
            <img
                :src="`${SERVER_ADDR}/upload/${medical.picdir}`"
                alt="护工头像"
                class="w-full h-full object-cover"
            >
          </div>
          <div class="flex-1">
            <div class="grid grid-cols-2 gap-4">
              <div>
                <p class="text-gray-500 text-sm">姓名</p>
                <p class="text-gray-800 font-medium">{{ medical.mname }}</p>
              </div>
              <div>
                <p class="text-gray-500 text-sm">工号</p>
                <p class="text-gray-800 font-medium">{{ medical.mno }}</p>
              </div>
              <div>
                <p class="text-gray-500 text-sm">联系电话</p>
                <p class="text-gray-800 font-medium">{{ medical.mphone }}</p>
              </div>
              <div>
                <p class="text-gray-500 text-sm">入住日期</p>
                <p class="text-gray-800 font-medium">{{ medical.entryDate}}</p>
              </div>
              <div>
                <p class="text-gray-500 text-sm">专业技能</p>
                <el-tag v-for="service in medical.services" class="text-gray-800 font-medium">
                  {{service.name}}
                </el-tag>
              </div>
            </div>
            <button class="mt-6 px-6 py-2 bg-blue-500 text-white !rounded-button whitespace-nowrap hover:bg-blue-600 transition-colors"
                    @click="showAddModel"
            >
              编辑资料
            </button>
          </div>
        </div>
      </div>
      <!-- 今日护理任务 -->
      <div class="bg-white rounded-lg shadow-md p-6">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-xl font-semibold text-gray-800">待护理 <span class="text-blue-500">({{reServers.length}})</span></h2>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <!-- 护理任务卡片 -->
          <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"
            v-for="reservice in reServers"
          >
            <div class="flex items-center mb-4">
              <div class="w-12 h-12 rounded-full overflow-hidden mr-3">
                <img
                    :src="`${SERVER_ADDR}/upload/${reservice.elderly.picdir}`"
                    alt="老人头像"
                    class="w-full h-full object-cover"
                >
              </div>
              <div>
                <p class="font-medium text-gray-800">{{ reservice.elderly.ename }}</p>
                <p class="text-sm text-gray-500">联系方式: {{ reservice.elderly.phone }}</p>
              </div>
            </div>
            <div class="space-y-2 mb-4">
              <p class="text-sm"><span class="text-gray-500">护理时间:</span> {{reservice.startTime }}- {{reservice.endTime}}</p>
              <p class="text-sm"><span class="text-gray-500">护理项目:</span> {{reservice.service.name}}</p>
            </div>
            <button class="w-full py-2 bg-green-500 text-white !rounded-button whitespace-nowrap hover:bg-green-600 transition-colors"
                    @click="startService(reservice.id)"
            >
              开始护理
            </button>
          </div>
        </div>
      </div>
      <!-- 护理记录日历 -->
      <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-6">护理记录</h2>
        <div class="mb-6 flex justify-between items-center">
          <div class="flex items-center space-x-4">
            <button class="p-2 rounded-full hover:bg-gray-100">
              <i class="el-icon-arrow-left text-gray-600"></i>
            </button>
            <span class="font-medium text-gray-800">2025 年 05 月</span>
            <button class="p-2 rounded-full hover:bg-gray-100">
              <i class="el-icon-arrow-right text-gray-600"></i>
            </button>
          </div>
          <button class="px-4 py-2 bg-blue-500 text-white !rounded-button whitespace-nowrap hover:bg-blue-600 transition-colors">
            查看详情
          </button>
        </div>
        <div class="grid grid-cols-7 gap-2 mb-4">
          <div class="text-center text-gray-500 text-sm py-2">日</div>
          <div class="text-center text-gray-500 text-sm py-2">一</div>
          <div class="text-center text-gray-500 text-sm py-2">二</div>
          <div class="text-center text-gray-500 text-sm py-2">三</div>
          <div class="text-center text-gray-500 text-sm py-2">四</div>
          <div class="text-center text-gray-500 text-sm py-2">五</div>
          <div class="text-center text-gray-500 text-sm py-2">六</div>
        </div>
        <div class="grid grid-cols-7 gap-2">
          <template v-for="day in 31" :key="day">
            <div
                class="h-24 border rounded-lg p-1 cursor-pointer hover:bg-gray-50"
                :class="{
                'bg-green-50 border-green-200': day === 16,
                'text-gray-400': day > 20 && day < 29
                }"
            >
              <div class="text-right text-sm mb-1">{{ day }}</div>
              <div
                  v-if="day === 16"
                  class="text-xs bg-green-100 text-green-600 rounded px-1 py-0.5 mb-1 truncate"
              >
                已完成: 李奶奶
              </div>
              <div
                  v-if="day === 16"
                  class="text-xs bg-green-100 text-green-600 rounded px-1 py-0.5 truncate"
              >
                已完成: 王爷爷
              </div>
            </div>
          </template>
        </div>
      </div>
    </main>
  </div>
  <!-- 修改护工对话框开始 -->
  <el-dialog v-model="updateDialoadShowMedical" title="修改护工" width="500">
    <el-form>
      <el-form-item label="头像" label-width="20%">
        <el-upload class="avatar-uploader" :action="`${SERVER_ADDR}/emp/file/upload`" name="pic"
                   :headers="headers" :show-file-list="false" :on-success="handleAvatarSuccessUpdate" :before-upload="beforeAvatarUpload">
          <img v-if="imageUrlUpdate" :src="imageUrlUpdate" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="姓名" label-width="20%">
        <el-input v-model="medicalUpdate.mname" autocomplete="off" style="width: 240px" />
      </el-form-item>
      <el-form-item label="护工号" label-width="20%">
        <el-input v-model="medicalUpdate.mno" autocomplete="off" style="width: 240px" disabled />
      </el-form-item>
      <el-form-item label="用户名" label-width="20%">
        <el-input v-model="medicalUpdate.musername" autocomplete="off" style="width: 240px" disabled />
      </el-form-item>
      <el-form-item label="性别" label-width="20%">
        <el-radio-group v-model="medicalUpdate.mgender">
          <el-radio value="男" border>男</el-radio>
          <el-radio value="女" border>女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="入职日期" label-width="20%">
        <el-date-picker v-model="medicalUpdate.entryDate" type="date" placeholder="请选择一个时间" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" style="width: 240px" />
      </el-form-item>
      <el-form-item label="联系电话" label-width="20%">
        <el-input v-model="medicalUpdate.mphone" autocomplete="off" style="width: 240px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialoadShowMedical = false">取消</el-button>
        <el-button type="primary" @click="updateByMedical">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改护工对话框结束 -->
</template>
<script lang="js" setup>
import {computed, ref} from 'vue';
import { ArrowLeft as ElIconArrowLeft, ArrowRight as ElIconArrowRight } from '@element-plus/icons-vue';
import {useTokenStore} from "@/stores/token.js";
import medicalApi from "@/api/emp/medicalApi.js";
import {ElMessage} from "element-plus";
import reserviceApi from "@/api/emp/reserviceApi.js";
const editDialogVisible = ref(false);
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
const medical = ref({});
const activeName = ref('first')
const elderlies = ref([]);
const tokenStore = useTokenStore();
//上传图片
const headers = computed(() => {
  let token = tokenStore.tokenStr;
  return {
    token
  }
})
// 护工当天服务
const reServers = ref([]);
//获取员工的基本信息
const getInfo = () => {
  medicalApi.empInfo()
      .then(resp => {
        medical.value = resp.data
        elderlies.value = resp.data.elderlies
      })
}
// 获取待护理的服务
const getServers = () => {
  let reservice = {
    date: getData()
  }
  reserviceApi.selectAll(reservice)
      .then(resp => {
        reServers.value = resp.data
      })
}
// 开始服务
const startService = (id) => {
  let reservice = {
    id: id,
    status: 2,
  }
  reserviceApi.update(reservice)
      .then(resp => {
        if(resp.code == 10000){
          ElMessage.success(resp.msg);
          getServers()
        }else{
          ElMessage.error(resp.msg)
        }
      })
}
const getData = () => {
  const now = new Date();

  const year = now.getFullYear();
  const month = ('0' + (now.getMonth() + 1)).slice(-2);
  const day = ('0' + now.getDate()).slice(-2);

  const formattedTime = `${year}-${month}-${day} 00:00:00`;

  return  formattedTime;
}
const medicalUpdate = ref({});
//定义修改对话框
const updateDialoadShowMedical = ref(false);
//显示修改数据
const showAddModel = ()=>{
  medicalApi.selectBymidEmp()
      .then(resp => {
        medicalUpdate.value = resp.data
        imageUrlUpdate.value = `${SERVER_ADDR.value}/upload/${resp.data.picdir}`;
        console.log(imageUrlUpdate.value)
      })
  updateDialoadShowMedical.value = true;
}
//修改员工信息
const updateByMedical = ()=>{
  medicalApi.updateByMedical(medicalUpdate.value)
      .then(resp => {
        if(resp.code == 10000){
          ElMessage.success(resp.msg);
          updateDialoadShowMedical.value = false;
          getInfo()
        }else{
          ElMessage.error(resp.msg)
        }
      })
}

const imageUrlUpdate = ref("");
const handleAvatarSuccessUpdate = (response, uploadFile) => {
  if (response.code == 10000) {

    ElMessage.success(response.msg);
    imageUrlUpdate.value = `${SERVER_ADDR.value}/upload/${response.data}`;
    medicalUpdate.value.picdir = response.data;
  }
}
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('只能上传jpg格式的图片')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2MB')
    return false
  }
  return true
}

getInfo();
getServers();
</script>
<style scoped>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-progress .el-progress--line {
  margin-bottom: 10px;
  max-width: 100%;
}

.avatar-uploader,
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border: 1px dotted #dcdfe6;
  border-radius: 5px;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
}
</style>